<template>
    <li class="topic-list-item">
        <router-link
            class="media"
            :to="{name:'live', params: {id:topic.id}}"
        >
            <div class="topic-list-thumb relative">
                <span :class="statusColor">{{topic.live_status_text}}</span>
                <img :src="topic.cover" alt="">
                <!-- <div class="thumb-cover"></div>  -->
            </div>
            <div class="list-body flex-item">
                <h4 class="list-body-head">{{topic.title}}</h4>
                <p class="list-body-subinfo" style="display: none;"><span>{{topic.type_text}}</span><time>{{topic.start_at}}</time></p>
                <p class="topic-list-body-count">{{topic.fic_num}}人次观看<span><i class="icon icon-msg"></i></span></p>
            </div>
            <router-link :to="{name:'guide', params: {id:topic.id}}"><i class="icon icon-more"></i></router-link>
        </router-link>
    </li>
</template>

<script>
import {getVideoStatusColor} from '@/utils/function';
export default {
    components: {},
    props: {
        topic: {
            type: Object
        }
    },
    data() {
        return {
        };
    },
    computed: {
        statusColor(){
            return getVideoStatusColor(this.topic.live_status);
        }
    },
    methods: {},
    created() {},
    mounted() {}
};
</script>
<style lang="scss" scoped>
@import '@/assets/config.scss';
.topic-list-item {
    display: flex;
    padding: 25px 35px;
    align-items: center;
    position: relative;
    &:after {
        content: '';
        height: 2px;
        position: absolute;
        left: 35px;
        right: 35px;
        bottom: 0;
        background-color: #f0f0f0;
    }
    
    .media { display: flex; }
    .topic-list-thumb {
        width: 270px;
        height: 168px;
        //padding-bottom: 25%;
        margin-right: 20px;
        position: relative;
        // .thumb-cover {
        //     position: absolute;
        //     top: 0;
        //     left: 0;
        //     width: 100%;
        //     height: 100%;
        //     border-radius: .2rem;
        //     background-size: cover !important;
        // }
        > span {
            position: absolute;
            top: 10px;
            left: 10px;
            padding: 6px 7px 5px;
            font-size: 24px;
            color: #fff;
            line-height: 26px;
            border-radius: 2px;
            &.blue{
                background: #1549eb;
            }

            &.orange {
                background: #fcba2e;
            }
        }

        img {
            width: 270px;
            height: 168px;
        }
    }


    .list-body-head {
        height: 72px;
        font-size: 28px;
        line-height: 36px;
        color: $title-color;
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
    }

    .list-body {
        padding-right: 45px;
    }

    .topic-list-body-count, .list-body-subinfo {
        font-size: 24px;
        line-height: 2;
        color: #888;
    }

    .div-line{
        margin: 0 20px 0 24px;
    }

    .icon {
        position: absolute;
        top: 25px;
        right: 35px;
        font-size: 48px;
        color: #ececec;
    }
}
</style>